<div ng-controller="UI.UITestController2">

  <div>
    <div class="row-fluid">
      <h3>Auto Drop Down</h3>
      <p>Handy for horizontal lists of things like menus, if the width of the element is smaller than the items inside any overflowing elements will be collected into a special dropdown element that's required at the end of the list</p>
      <script type="text/ng-template" id="autoDropDownTemplate">
        <ul class="nav nav-tabs" hawtio-auto-dropdown>
          <!-- All of our menu items -->
          <li ng-repeat="item in menuItems">
            <a href="">{{item}}</a>
          </li>
          <!-- The dropdown that will collect overflow elements -->
          <li class="dropdown overflow" style="float: right !important; visibility: hidden;">
            <a href="" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon-chevron-down"></i>
            </a>
            <ul class="dropdown-menu right"></ul>
          </li>
        </ul>
      </script>
      <div hawtio-editor="autoDropDown" mode="fileUploadExMode"></div>
      <div class="directive-example">
        <div compile="autoDropDown"></div>
      </div>
    </div>
  </div>
</div>
